<template>
  <!-- AccessRecord 访问记录 -->
  <PageContainer>
    <view class="container">
      <Header title="访问记录" />
      <Paglist
        v-model="dataList"
        :parame="parame"
        :is-init-api="false"
        @register="register"
        :scroll-top-bottom="200"
      >
        <view class="data-list">
          <template v-for="v in dataList" :key="v.id">
            <view v-if="parame.type === PotentialClientsTypeEnum.COUPON" class="coupon-item">
              <text>{{ v.name }}</text>
              <text>{{ v.createTime }}</text>
            </view>

            <view v-else class="other-item" @click="toCard(v.leadingId)">
              <view class="member-info">
                <view class="member-info_avatar">
                  <TImage :src="v.avatar" width="150rpx" height="180rpx" border-radius="10rpx" />
                </view>
                <view class="member-info_text">
                  <view class="info-top">
                    <view class="user-name">
                      <text class="text-overflow-1">{{ v.name }}</text>
                      <view v-if="v.leveName" class="social-position">
                        {{ v.leveName }}
                      </view>
                    </view>
                    <view class="user-phone">
                      <text>{{ v.companyName }}</text>
                      <text style="margin-left: 12rpx">{{ v.socialPosition }}</text>
                    </view>
                    <image class="card-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-12.png" />
                  </view>
                  <view class="info-time">
                    <view>
                      <text>最后查看时间</text>
                      <text>{{ v.createTime }}</text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="item-bot">
                <text>查看次数： {{ v.count }}</text>
              </view>
            </view>
          </template>
        </view>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  AccessRecord  访问记录 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import { potentialClientRecordPageList } from '@/api/admin';
  import {
    PotentialClientRecordPageListData,
    PotentialClientRecordPageListResult,
  } from '@/api/admin/types';
  import Header from '@/components/Header/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { PotentialClientsTypeEnum } from '@/enums/commercializeEnum';
  import { navigateTo, onLoad } from '@/router';
  import { provide, reactive, ref } from 'vue';
  import TImage from '@/components/TImage/index.vue';

  provide('api', potentialClientRecordPageList);

  const [register, { refresh }] = useConList();

  const parame = reactive<PotentialClientRecordPageListData>({
    current: 1,
    size: 10,
    type: PotentialClientsTypeEnum.MEMBERUNIT,
    appUserId: 0,
  });

  const dataList = ref<PotentialClientRecordPageListResult[]>([]);

  onLoad<'AccessRecord'>((op) => {
    parame.type = op.type;
    parame.appUserId = op.appUserId;
    refresh();
  });

  const toCard = (leadingId: number) => {
    navigateTo({ name: 'personCard', options: { id: leadingId } });
  };

  provide('tabIsShow', null);
</script>

<style lang="scss" scoped>
  .data-list {
    .coupon-item {
      padding: 0 30rpx;
      background-color: #fff;
      height: 100rpx;
      border-bottom: 1px solid #dddddd;
      font-size: 28rpx;
      color: #808080;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:nth-last-child(1) {
        border-bottom: none;
      }
    }
    .other-item {
      padding: 30rpx;
      background-color: #fff;
      padding-bottom: 0;
      margin-bottom: 30rpx;
      .member-info {
        display: flex;
        align-items: center;
        height: 180rpx;
        padding-bottom: 40rpx;
        border-bottom: 1px solid #dddddd;
        &_avatar {
          width: 150rpx;
          flex-shrink: 0;
          margin-right: 30rpx;
        }
        &_text {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .info-top {
            position: relative;
            .card-icon {
              width: 40rpx;
              height: 26rpx;
              position: absolute;
              top: 0;
              right: 0;
            }
          }
          .user-name,
          .user-phone {
            color: #333;
            font-size: 28rpx;
          }
          .user-name {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            font-weight: bolder;
            margin-right: 80rpx;
            .social-position {
              background-color: #ece2c7;
              border-radius: 110rpx;
              color: #333;
              font-size: 24rpx;
              padding: 0 14rpx;
              margin-left: 20rpx;
            }
          }
          .info-time {
            font-size: 24rpx;
            color: #aaabab;
          }
        }
      }
      .item-bot {
        height: 90rpx;
        line-height: 90rpx;
        font-size: 24rpx;
        color: #808080;
      }
    }
  }
</style>
